<template>
  <view class="container">
    <StatusBar />
    
    <view class="device-header">
      <view class="device-info">
        <text class="device-name">{{ currentDevice?.name }}</text>
        <!-- <text class="device-id">ID: {{ currentDevice?.id }}</text> -->
        <text class="device-id">ID: GRAS3_acu_all_v1_1</text>
      </view>
      <view class="header-right">
        <text :class="['status-tag', getDeviceStatus]">{{ statusText }}</text>
      </view>
    </view>

    <!-- 基本状态信息 -->
    <view class="section">
      <view class="section-title">基本状态信息</view>
      <view class="parameter-grid">
        <view class="parameter-card">
          <text class="param-name">任务状态</text>
          <text class="param-value">{{ getTaskStatus }}</text>
        </view>
        <view class="parameter-card">
          <text class="param-name">子系统状态</text>
          <text class="param-value">{{ getSubSystemStatus }}</text>
        </view>
        <view class="parameter-card">
          <text class="param-name">观测源名</text>
          <text class="param-value">{{ deviceData.ObserveSourceName || '无' }}</text>
        </view>
        <view class="parameter-card">
          <text class="param-name">当前时标</text>
          <text class="param-value">{{ deviceData.formatted_date_time }}</text>
        </view>
      </view>
    </view>

    <!-- ACU状态信息 -->
    <view class="section">
      <view class="section-title">ACU状态信息</view>
      <view class="parameter-grid">
        <view class="parameter-card">
          <text class="param-name">ACU上位机主备状态</text>
          <text class="param-value">{{ getACUMasterStatus }}</text>
        </view>
        <view class="parameter-card">
          <text class="param-name">ACU上位机备机状态</text>
          <text class="param-value">{{ getACUBackupStatus }}</text>
        </view>
        <view class="parameter-card">
          <text class="param-name">ACU主备状态</text>
          <text class="param-value">{{ getACUStatus }}</text>
        </view>
        <view class="parameter-card">
          <text class="param-name">ACU备机状态</text>
          <text class="param-value">{{ getACUBackStatus }}</text>
        </view>
      </view>
    </view>

    <!-- 位置和角度信息 -->
    <view class="section">
      <view class="section-title">位置和角度信息</view>
      <view class="parameter-grid">
        <view class="parameter-card">
          <text class="param-name">天线方位角度</text>
          <text class="param-value">{{ deviceData.AzValue }}°</text>
        </view>
        <view class="parameter-card">
          <text class="param-name">天线俯仰角度</text>
          <text class="param-value">{{ deviceData.ElValue }}°</text>
        </view>
        <view class="parameter-card">
          <text class="param-name">方位角度理论值</text>
          <text class="param-value">{{ deviceData.AzPreValue }}°</text>
        </view>
        <view class="parameter-card">
          <text class="param-name">俯仰角度理论值</text>
          <text class="param-value">{{ deviceData.ElPreValue }}°</text>
        </view>
      </view>
    </view>

    <!-- 驱动器状态 -->
    <view class="section">
      <view class="section-title">驱动器状态</view>
      <view class="parameter-grid">
        <view 
          v-for="(status, index) in azDriverStatus" 
          :key="'az'+index"
          class="parameter-card"
        >
          <text class="param-name">方位{{ index + 1 }}号驱动器</text>
          <text :class="['param-value', status === '1' ? 'error' : '']">
            {{ status === '0' ? '正常' : '故障' }}
          </text>
        </view>
        <view 
          v-for="(status, index) in elDriverStatus" 
          :key="'el'+index"
          class="parameter-card"
        >
          <text class="param-name">俯仰{{ index + 1 }}号驱动器</text>
          <text :class="['param-value', status === '1' ? 'error' : '']">
            {{ status === '0' ? '正常' : '故障' }}
          </text>
        </view>
      </view>
    </view>

    <!-- 限位状态 -->
    <view class="section">
      <view class="section-title">限位状态</view>
      <view class="parameter-grid">
        <view class="parameter-card">
          <text class="param-name">方位软件顺限</text>
          <text :class="['param-value', deviceData.AzSWCWLimit === '1' ? 'warning' : '']">
            {{ deviceData.AzSWCWLimit === '1' ? '限位' : '未限位' }}
          </text>
        </view>
        <view class="parameter-card">
          <text class="param-name">方位硬件顺限</text>
          <text :class="['param-value', deviceData.AzHWCWLimit === '1' ? 'error' : '']">
            {{ deviceData.AzHWCWLimit === '1' ? '限位' : '未限位' }}
          </text>
        </view>
        <view class="parameter-card">
          <text class="param-name">方位软件逆限</text>
          <text :class="['param-value', deviceData.AzSWACWLimit === '1' ? 'warning' : '']">
            {{ deviceData.AzSWACWLimit === '1' ? '限位' : '未限位' }}
          </text>
        </view>
        <view class="parameter-card">
          <text class="param-name">方位硬件逆限</text>
          <text :class="['param-value', deviceData.AzHWACWLimit === '1' ? 'error' : '']">
            {{ deviceData.AzHWACWLimit === '1' ? '限位' : '未限位' }}
          </text>
        </view>
        <view class="parameter-card">
          <text class="param-name">俯仰软件上限</text>
          <text :class="['param-value', deviceData.ElSWCWLimit === '1' ? 'warning' : '']">
            {{ deviceData.ElSWCWLimit === '1' ? '限位' : '未限位' }}
          </text>
        </view>
        <view class="parameter-card">
          <text class="param-name">俯仰硬件上限</text>
          <text :class="['param-value', deviceData.ElHWCWLimit === '1' ? 'error' : '']">
            {{ deviceData.ElHWCWLimit === '1' ? '限位' : '未限位' }}
          </text>
        </view>
        <view class="parameter-card">
          <text class="param-name">俯仰软件下限</text>
          <text :class="['param-value', deviceData.ElSWACWLimit === '1' ? 'warning' : '']">
            {{ deviceData.ElSWACWLimit === '1' ? '限位' : '未限位' }}
          </text>
        </view>
        <view class="parameter-card">
          <text class="param-name">俯仰硬件下限</text>
          <text :class="['param-value', deviceData.ElHWACWLimit === '1' ? 'error' : '']">
            {{ deviceData.ElHWACWLimit === '1' ? '限位' : '未限位' }}
          </text>
        </view>
      </view>
    </view>

    <!-- 其他状态 -->
    <view class="section">
      <view class="section-title">其他状态</view>
      <view class="parameter-grid">
        <view class="parameter-card">
          <text class="param-name">馈源状态</text>
          <text class="param-value">{{ getFeedStatus }}</text>
        </view>
        <view class="parameter-card">
          <text class="param-name">天线内外圈状态</text>
          <text class="param-value">{{ getInOutStatus }}</text>
        </view>
        <view class="parameter-card">
          <text class="param-name">控制方式</text>
          <text class="param-value">{{ getControlMode }}</text>
        </view>
        <view class="parameter-card">
          <text class="param-name">馈源驱动器状态</text>
          <text :class="['param-value', deviceData.FeedDriverStatus === '1' ? 'error' : '']">
            {{ deviceData.FeedDriverStatus === '0' ? '正常' : '故障' }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import StatusBar from '@/components/StatusBar/StatusBar.vue'
import { useDeviceStore } from '@/stores/device'

const deviceStore = useDeviceStore()
const deviceData = ref({})

// 模拟数据获取
onMounted(() => {
  // 这里应该是从API获取数据
  deviceData.value = {
    "TaskStatus":"0",
    "SubSystemStatus":"0",
    "PriBakMACUStatus":"0",
    "BakMACUStatus":"0",
    "PriBakACUStatus":"0",
    "BakACUStatus":"1",
    "ObserveSourceName":"",
    "formatted_date_time":"2024-04-17 06:54:42",
    "FeedStatus":"3",
    "SatOrbitOffsetAz":"0.000",
    "SatOrbitOffsetEl":"0.000",
    "AntCorrectValueAz":"0.076",
    "AntCorrectValueEl":"0.022",
    "AzValue":"0.012",
    "ElValue":"90.009",
    "AzPreValue":"165.447",
    "ElPreValue":"70.734",
    "InOutStatus":"2",
    "AzSWCWLimit":"0",
    "AzHWCWLimit":"0",
    "AzSWACWLimit":"0",
    "AzHWACWLimit":"1",
    "ElSWCWLimit":"0",
    "ElHWCWLimit":"0",
    "ElSWACWLimit":"0",
    "ElHWACWLimit":"0",
    "az_driver_power":"0",
    "el_driver_power":"0",
    "AzDriver1Status":"1",
    "AzDriver2Status":"1",
    "AzDriver3Status":"1",
    "AzDriver4Status":"1",
    "ElDriver1Status":"1",
    "ElDriver2Status":"1",
    "ElDriver3Status":"1",
    "ElDriver4Status":"1",
    "ElLock":"1",
    "AzDriverBrake":"0",
    "ElDriverBrake":"0",
    "ControlMode":"0",
    "AzOffsetValue":"54.776",
    "ElOffsetValue":"-62.753",
    "AzTurnDirection":"0",
    "ElTurnDirection":"0",
    "FeedDriverStatus":"0"
  }
})

// 计算属性
const getDeviceStatus = computed(() => {
  if (deviceData.value.SubSystemStatus === '1') return 'warning'
  if (deviceData.value.SubSystemStatus === '2') return 'error'
  return 'online'
})

const statusText = computed(() => {
  const statusMap = {
    online: '正常',
    warning: '警告',
    error: '故障',
    offline: '离线'
  }
  return statusMap[getDeviceStatus.value]
})

const getTaskStatus = computed(() => {
  const statusMap = {
    '0': '空闲',
    '1': '数据接收',
    '2': 'VLBI'
  }
  return statusMap[deviceData.value.TaskStatus] || '未知'
})

const getSubSystemStatus = computed(() => {
  const statusMap = {
    '0': '正常',
    '1': '告警',
    '2': '中断'
  }
  return statusMap[deviceData.value.SubSystemStatus] || '未知'
})

const getACUMasterStatus = computed(() => {
  return deviceData.value.PriBakMACUStatus === '0' ? 'A为主机，B为备机' : 'A为备机，B为主机'
})

const getACUBackupStatus = computed(() => {
  return deviceData.value.BakMACUStatus === '0' ? '备机正常' : '备机异常'
})

const getACUStatus = computed(() => {
  return deviceData.value.PriBakACUStatus === '0' ? 'A为主机，B为备机' : 'A为备机，B为主机'
})

const getACUBackStatus = computed(() => {
  return deviceData.value.BakACUStatus === '0' ? '备机正常' : '备机异常'
})

const getFeedStatus = computed(() => {
  const statusMap = {
    '0': '无',
    '1': 'UHF',
    '2': 'L',
    '3': 'SX',
    '4': 'KU'
  }
  return statusMap[deviceData.value.FeedStatus] || '未知'
})

const getInOutStatus = computed(() => {
  return deviceData.value.InOutStatus === '1' ? '内圈' : '外圈'
})

const getControlMode = computed(() => {
  return deviceData.value.ControlMode === '0' ? '本控' : '远控'
})

const azDriverStatus = computed(() => ([
  deviceData.value.AzDriver1Status,
  deviceData.value.AzDriver2Status,
  deviceData.value.AzDriver3Status,
  deviceData.value.AzDriver4Status
]))

const elDriverStatus = computed(() => ([
  deviceData.value.ElDriver1Status,
  deviceData.value.ElDriver2Status,
  deviceData.value.ElDriver3Status,
  deviceData.value.ElDriver4Status
]))
</script>

<style lang="scss" scoped>
.container {
  padding-top: 88rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.device-header {
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.device-info {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.device-name {
  font-size: 36rpx;
  font-weight: bold;
}

.device-id {
  font-size: 28rpx;
  color: #666;
}

.status-tag {
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #fff;
}

.status-tag.online {
  background: #67C23A;
}

.status-tag.warning {
  background: #E6A23C;
}

.status-tag.error {
  background: #F56C6C;
}

.status-tag.offline {
  background: #909399;
}

.section {
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #303133;
}

.parameter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.parameter-card {
  background: #f8f9fa;
  padding: 20rpx;
  border-radius: 10rpx;
  border-left: 6rpx solid #dcdfe6;
}

.param-name {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
}

.param-value {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;

  &.warning {
    color: #E6A23C;
  }

  &.error {
    color: #F56C6C;
  }
}
</style> 